<template>
	<div class="overflow-hidden">
		<n-card :bordered="false" class="h-full rounded-8px shadow-sm">
			<div class="flex-col h-full">
				<n-space class="pb-12px" justify="space-between">
					<n-space>
						<n-button type="primary" @click="addEditRef.handleAddTable('right')" v-permission="'sys:role:add'">
							<icon-ic-round-plus class="mr-4px text-10px"/>
							新增
						</n-button>
						<n-button type="success" v-permission="'sys:role:export'">
							<icon-uil:export class="mr-4px text-10px"/>
							导出Excel
						</n-button>
					</n-space>
					<n-space align="center" :size="18">
						<n-button size="small" type="primary" @click="roleTableData">
							<icon-mdi-refresh class="mr-4px text-16px"/>
							刷新表格
						</n-button>
					</n-space>
				</n-space>
				<el-table
					:data="data"
					border
					v-loading="loading"
					center
					empty-text="暂无数据"
					style="width: 100%"
				>
					<el-table-column prop="roleName" label="角色名称" align="center"/>
					<el-table-column prop="roleCode" label="角色编码" align="center"/>
					<el-table-column prop="dsType" label="数据权限" align="center">
						<template #default="{row}">
							<n-tag type="info" v-if="row.dsType===0">
								全部
							</n-tag>
							<n-tag type="info" v-if="row.dsType===1">
								本级
							</n-tag>
							<n-tag type="info" v-if="row.dsType===2">
								本级以及子级
							</n-tag>
							<n-tag type="info" v-if="row.dsType===3">
								自定义
							</n-tag>
							<n-tag type="info" v-if="row.dsType===4">
								本人
							</n-tag>
						</template>
					</el-table-column>
					<el-table-column prop="createBy" label="创建人" align="center"/>
					<el-table-column prop="createTime" label="创建时间" align="center"/>
					<el-table-column label="操作" align="center">
						<template #default="scope">
							<n-space justify="center">
								<n-button type="primary" text class="text-15px" @click="addEditRef.edit(scope.row)"
													v-permission="'sys:role:update'">
									<icon-ep-edit-pen/>
									编辑
								</n-button>
								<n-button type="primary" text class="text-15px"
													@click="allocationPermissionRef.handlerPermission(scope.row)"
													v-permission="'sys:role:assignmentPermission'">
									<icon-mdi-toggle-switch-off-outline class="text-20px"/>
									权限
								</n-button>
								<n-popconfirm
									@positive-click="confirmEvent(scope.row.roleId)"
								>
									<template #trigger>

										<n-button type="error" text class="text-15px"
															v-permission="'sys:role:delete'">
											<icon-ic-round-delete/>
											删除
										</n-button>
									</template>
									你确定要删除吗?
								</n-popconfirm>
							</n-space>
						</template>
					</el-table-column>
				</el-table>
				<n-space justify="end" class="mt-5px">
					<n-pagination
						v-model:page="roleSearchParams.page"
						v-model:page-size="roleSearchParams.size"
						:item-count="itemCount"
						show-size-picker
						:page-sizes="[10, 20, 30, 40]"
						:on-update:page="onChange"
						:on-update:page-size="onUpdatePageSize"
					/>
				</n-space>
			</div>
		</n-card>

		<AllocationPermission ref="allocationPermissionRef" @fetch-data="roleTableData"/>
		<AddEdit ref="addEditRef" @fetch-data="roleTableData"/>
	</div>
</template>

<script setup>
import {reactive, toRefs, ref, onMounted} from "vue";
import {fetchRoleList, delRole} from '@/service';
import {useMessage} from 'naive-ui'
import AllocationPermission from './components/allocationPermission.vue'
import AddEdit from './components/addEdit.vue'

const msg = useMessage()

const allocationPermissionRef = ref(null);

const addEditRef = ref(null);

const state = reactive({
	loading: false,
	roleSearchParams: {
		page: 1,
		size: 10,
	},
	itemCount: 0,
	data: [],
	checkedRowKeysRef: [],
	roleId: ''
})
const {
	loading,
	data,
	roleSearchParams,
	itemCount,
	title
} = toRefs(state)


const handleSelectionChange = (val) => {
	if (val) {
		state.checkedRowKeysRef = val.map(item => item.roleId)
	}
}

// 确认框删除
const confirmEvent = async (roleId) => {
	const {data} = await delRole([roleId])
	resultTableInit(data);
}

// 删除多个
const handlerDelete = async () => {
	const {data} = await delRole(state.checkedRowKeysRef)
	resultTableInit(data);
}

const resultTableInit = (data) => {
	if (!data) {
		msg.error("处理失败")
	} else {
		msg.success("处理成功");
	}
	roleTableData();
}


const onChange = (page) => {
	state.roleSearchParams.page = page;
	roleTableData();
}

const onUpdatePageSize = (pageSize) => {
	state.roleSearchParams.size = pageSize;
	roleTableData();
}

// 页面加载时请求数据
onMounted(() => {
	roleTableData()
})

const roleTableData = async () => {
	state.loading = true
	setTimeout(async () => {
		const {data} = await fetchRoleList({...state.roleSearchParams})
		state.data = data.records;
		state.itemCount = data.total;
		state.loading = false
	}, 400)

}


</script>

<style scoped></style>
